<template>
  <div class="toorbar">
    <div class="btn orderbtn" @click="goOrder"><i class="iconfont icon-shouye"></i>订单</div>
    <div class="btn collectbtn" @click="goCollect"><i class="iconfont icon-shoucang"></i>收藏</div>
    <div class="btn cartbtn" @click="goCart"><i class="iconfont icon-gouwuche"></i>购物车</div>
  </div>
</template>

<script>
export default {
  name: 'toorbar',
  methods: {
    goOrder() {
      this.$router.push('/order')
    },
    goCollect() {
      this.$router.push('/collect')
    },
    goCart() {
      this.$router.push('/shoppingCart')
    }
  }
}
</script>

<style lang="less">
.toorbar {
  position: fixed;
  right: 0;
  bottom: 150px;
  display: flex;
  flex-direction: column;
  width: 84px;
  background: #fff;
  z-index: 99;
  .btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 92px;
    font-size: 14px;
    color: #757575;
    border-bottom: 1px #f5f5f5 solid;
    cursor: pointer;
    &:last-child {
      border: none;
    }
    i {
      font-size: 26px;
      margin-bottom: 10px;
    }
  }
}
</style>
